<template>
  <div class="sms-container">

    <div class="box">

      <div class="form column">
        <!-- 账号 -->
        <div class="account box column">

          <div class="row" style="width: 100%;">
            <div class="text">
              手机号
            </div>
            <div class="input">
              <Input v-model.trim="iphoneNo"
                     size="large"
                     ref="iphoneNo"
                     @on-keyup="checkIphone"
                     @on-blur="checkIphone"
                     @on-enter="goNext('iphoneNo')"
                     clearable
                     placeholder="请输入手机号"/>
            </div>
          </div>

          <div class="tip">
            {{ iphoneNoTip }}
          </div>
        </div>

        <!-- 密码 -->
        <div class="pwd box" style="display: flex;">

          <div class="row" style="width: 100%;">
            <div class="text">
              验证码
            </div>
            <div class="input row">
              <Input v-model.trim="verifyCode"
                     size="large"
                     ref="verifyCode"
                     style="width: 160px"
                     type="password"
                     @on-enter="goNext('verifyCode')"
                     clearable
                     placeholder="请输入验证码"/>

              <div v-if="!isSendCode" @click="sendCode" class="code verify">
                验证码
              </div>

              <div v-if="isSendCode" class="code down">
                倒计时 <span style="color:#F00">{{ s }}</span>
              </div>
            </div>
          </div>

          <div class="tip">
            {{ verifyCodeTip }}
          </div>
        </div>

        <!-- 按钮 -->
        <div class="btn" @click="login">
          登录
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  //组件名称
  name: "SMS",
  props: [],
  //组件注册
  components: {},
  //数据驱动
  data() {
    return {
      iphoneNo: "",
      verifyCode: "",
      iphoneNoTip: "",
      verifyCodeTip: "",

      isSendCode: false,
      s: 30,
      c: null
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    checkIphone() {
      let b1 = this.check.isNull(this.iphoneNo);
      if (b1) {
        this.iphoneNoTip = "手机号不能为空"
        return false
      } else {
        this.iphoneNoTip = ""
      }
      let b = this.check.isPhoneNo(this.iphoneNo);
      if (!b) {  //true
        this.iphoneNoTip = "手机号格式错误"
        return false
      } else {
        this.iphoneNoTip = ""
      }
      return true
    },
    goNext(tab) {
      switch (tab) {
        case "iphoneNo":

          break;
        case "verifyCode":
          break;
      }
    },
    login() {

    },
    // 发送短信
    sendCode() {
      let b = this.checkIphone();
      if (!b) {
        return false
      }
      this.verifyCodeTip = "验证码已发送"
      this.verifyCode = ""
      this.c = setInterval(() => {
        this.s--;
        if (this.s == 0) {
          this.isSendCode = false
          this.s = 30
          clearInterval(this.c);
        }
      }, 1000)
      this.isSendCode = true
    }
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.sms-container {
  margin: 20px auto;
}

.form {
  .box {
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
  }

  .text {
    width: 70px;
    line-height: 40px;
    height: 40px;
    text-align: right;
    padding-right: 15px;
  }

  .input {
    width: 280px;
  }

  .tip {
    font-size: 12px;
    color: #F00;
    height: 14px;
    line-height: 14px;
    margin: 2px 0px 0px 70px;
  }

  .code {
    text-align: center;
    width: 100px;
    margin-left: 20px;
    line-height: 40px;
    cursor: pointer;
    border-radius: 4px;
  }

  .verify {
    background-color: #19be6b;
    font-size: 16px;
    color: #FFF;
    font-weight: bolder;
  }

  .down {
    background-color: #DCDCDC;
    font-size: 16px;
    color: #656262;
    font-weight: lighter;
  }

  .btn {
    cursor: pointer;
    width: 280px;
    margin-left: 70px;
    text-align: center;
    font-size: 22px;
    font-weight: bolder;
    color: #FFF;
    background-color: #28c173;
    height: 40px;
    line-height: 40px;
    border-radius: 6px;
  }
}

.column {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
}
</style>